<template>
  <div class="list xui-fc xui-padding-vertical-md ">
    <div class="list__img">
      <router-link :to="href">
        <img-box
          :width="252"
          :height="136"
          :imgSrc="item.coverUrl || item.imgUrl"
        >
        </img-box>
      </router-link>
    </div>
    <div class="list__text xui-padding-horizontal-lg xui-margin-top">
      <router-link :to="href">
        <h4 class="xui-text-truncate">{{item.title || item.vTitle}}</h4>
      </router-link>
      <div v-if="summary">
        <p class="xui-text-truncate" v-for="(item,index) in summary" :key="index">{{item}}</p>
      </div>
      <p v-else class="xui-text-truncate-line-2">{{intro | truncate(80)}}</p>
    </div>
    <div v-if="item.publishDate" class="list__time xui-padding-vertical-xs font-size-sm">
      <span class="day">{{item.publishDate.split('-')[2]}}</span>
      <span class="year">{{ `${item.publishDate.split('-')[0]} - ${item.publishDate.split('-')[1]}` }}</span>
    </div>
    <div v-if="item.pubdate" class="list__time xui-padding-vertical-xs font-size-sm">
      <span class="day">{{item.pubdate.split(" ")[0].split('-')[2]}}</span>
      <span class="year">{{ `${item.pubdate.split(" ")[0].split('-')[0]} - ${item.pubdate.split(" ")[0].split('-')[1]}` }}</span>
    </div>
  </div>
</template>

<script>
import ImgBox from "@/components/widge/img-box";
import { filterHTMLTag } from "@/utils/index";
import { parseTime } from "@/utils";
import { getBrowseNum } from "@/api/detail";
export default {
  components: {
    "img-box": ImgBox
  },
  props: {
    href: String,
    item: Object
  },
  data() {
    return {};
  },
  computed: {
    intro() {
      let param = this.item.content || this.item.vContent;
      return filterHTMLTag(param);
    },
    summary() {
      if (!Boolean(this.item.contentSummary)) {
        return false;
      }
      return this.item.contentSummary.split("\n").slice(0, 3);
    }
  },

  filters: {
    parseTime(value, pattern) {
      console.log(value, pattern);
      return parseTime(value, pattern);
    }
  }
};
</script>

 <style lang='less' scoped>
.list {
  width: 932px;
  position: relative;
  border-bottom: 1px solid #e8e8e8;
}
.list > div {
  float: left;
}
.list .list__img {
  width: 252px;
  height: 136px;
}
.list .list__img a {
  display: block;
}
.list .list__text {
  width: calc(100% - 42px);
}
.list .list__text h4 {
  color: #ba743a;
}
.list .list__text p {
  color: #6d4d38;
  font-size: 13px;
}
.list .list__time {
  width: 138px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -44px;
  border-left: 1px solid #d6af8f;
}
.list .list__time span {
  display: block;
  text-align: center;
}
.list .list__time .day {
  font-size: 36px;
  color: #916746;
}
.list .list__time .year {
  font-size: 14px;
  color: #734f33;
}
</style>

